<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<!-- 1.生成普通标签:标签选择器div -->
<div>
</div>
<p></p>
<!-- 2.生成div标签+类名: 类选择器 .red -->
<div class="red"></div>
<div class="father"></div>
<div class="son"></div>
<!-- 3.生成div标签+id属性:id选择器 #one -->
<div id="one"></div>
<div id="two"></div>
<!-- 4.生成指定标签+类名+id属性:交集选择器 p.red#one-->
<p class="red" id="one"></p>
<h1 id="hu"></h1>
<h3 class="hu" id="loj"></h3>
<!-- 5.生成儿子:子代选择器  ul>li -->
<ul>
    <li></li>
</ul>
<ul>
    <ol></ol>
</ul>
<div class="father">
    <div class="soN"></div>
</div>
<!-- 6.生成内部文本:大括号ul>li{内容} -->
<div>内容</div>
<ul>
    <li>内容</li>
</ul>
<!-- 7.同时创建多个:*个数  ul>li*3 -->
<ul>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ul>
</body>

</html>